<!doctype html>
<html>
    <head>
        <title>Upload your resume</title>
        <style>
            body{
            background: rgba(0,0,0,0.9);
            }
            form{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -250px;
            width: 500px;
            height: 200px;
            border: 4px dashed #fff;
            }
            form p{
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 170px;
            color: #ffffff;
            font-family: Arial;
            }
            form input{
            position: absolute;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            outline: none;
            opacity: 0;
            }
            form button{
            margin: 0;
            color: #fff;
            background: #16a085;
            border: none;
            width: 508px;
            height: 35px;
            margin-top: -20px;
            margin-left: -4px;
            border-radius: 4px;
            border-bottom: 4px solid #117A60;
            transition: all .2s ease;
            outline: none;
            }
            form button:hover{
            background: #149174;
                color: #0C5645;
            }
            form button:active{
            border:0;
            }
        </style>
        <script>
            function handleFileSelection(event) {
                const fileInput = event.target;
                const file = fileInput.files[0];
                const fileName = file.name;

                const formText = document.getElementById("form-text");
                formText.innerText = fileName;
            }

            function handleButtonClick() {
                const button = document.querySelector('button[type="submit"]');
                button.innerText = "Processing, please wait...";
            }

            function handleFormReset() {
                const formText = document.getElementById("form-text");
                formText.innerText = "Drag your resume here or click in this area.";

                const button = document.querySelector('button[type="submit"]');
                button.innerText = "Upload";
            }

            window.addEventListener("pageshow", function(event) {
                const form = document.querySelector("form");
                form.reset();
            });
        </script>
    </head>
    <body>
        <form method=post enctype=multipart/form-data onreset="handleFormReset()">
            <input type=file name=file onchange="handleFileSelection(event)">
            <p id=form-text>Drag your resume here or click in this area.</p>
            <button type=submit value=Upload onclick="handleButtonClick()">Upload</button>
        </form>
    </body>
</html>